今日任務:滑鼠碰到其中一個會展開，並顯示上下文字
主要著重在css flexbox transition

HTML部分

<div class="panels">
    <div class="panel panel1">
        <p>Hey</p>
        <p>Let's</p>
        <p>Dance</p>
    </div>
    <div class="panel panel2">
        <p>Give</p>
        <p>Take</p>
        <p>Receive</p>
    </div>
    <div class="panel panel3">
        <p>Experience</p>
        <p>It</p>
        <p>Today</p>
    </div>
    <div class="panel panel4">
    	<p>Give</p>
    	<p>All</p>
    	<p>You can</p>
    </div>
    <div class="panel panel5">
        <p>Life</p>
        <p>In</p>
        <p>Motion</p>
    </div>
</div>

CSS部分

flex-grow，flex-shrink，和 flex-basis

• flex-grow: 有剩餘空間的話，將剩下空間按比例分配
• flex-shrink: 空間不夠的話，按比例壓縮
• flex-basis: 指定預設的寬度，有點像width，如果同時設定flex-basis和width，以flex-basis為優先
• 可簡寫為flex: flex-grow / flex-shrink / flex-basis，例如flex: 1 0 auto;

在panels裡面寫flex

.panels {
    display: flex;
    overflow: hidden;
    height: 100vh;
}

將panel裡面的文字也用flex排好

.panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

將文字又各自用flex達到置中效果

.panel p {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

將上下文字都先移出視窗

.panel.open p:first-child,
.panel.open p:last-child {
    transform: translateY(0%);
}

當被選取到的時候文字就移回視窗中

.panel p:first-child {
    transform: translateY(-100%);
}
.panel p:last-child {
    transform: translateY(100%);
}

.open讓被選到的那格變大，使用flex-grow:5(佔5格)

.panel.open {
    flex-grow: 5;
    font-size: 30px;
}

JS部分

作者是寫panel展開動畫結束後文字再進入畫面，我這邊是同時進行
toggle() 可用來切換狀態
被點到加上.open，再點就移掉.open

const panels = document.querySelectorAll('.panel')

panels.forEach((panel) => panel.addEventListener('click', openPanel))

function openPanel() {
    this.classList.toggle('open')
}

今日學習到的:

• flex-grow，flex-shrink，和 flex-basis
• toggle() 可用來切換狀態

效果連結:連結

參考連結:
MDN: flex-glow
flex-glow
MDN: toggle